import React from 'react';
import { PieChartOutlined, LaptopOutlined, NotificationOutlined, UserOutlined, UnorderedListOutlined } from '@ant-design/icons';

import { Layout, Menu, theme } from 'antd';
const { Sider } = Layout;
import { useNavigate } from 'react-router-dom';
import { useStore } from '@/store'
let menus = [
  {
    key: 'board',
    icon: React.createElement(PieChartOutlined),
    label: '看板'
  },
  {
    key: 'lists',
    icon: React.createElement(UnorderedListOutlined),
    label: '列表'
  },
  {
    key: 'sub2',
    icon: React.createElement(UserOutlined),
    label: '首页',
    children: [
      {
        key: 'home',
        label: '首页1'
      }
    ]
  },
  {
    key: 'sub3',
    icon: React.createElement(LaptopOutlined),
    label: '关于',
    children: [
      {
        key: 'about',
        label: '关于1',
      }
    ]
  },
  {
    key: 'sub4',
    icon: React.createElement(NotificationOutlined),
    label: '其他',
    children: [
      {
        key: 'other',
        label: '其他1',
      },
      {
        key: 'sub4-2',
        label: '其他2',
      }
    ]
  },
]

const MenuBox = () => {
  const { testStore } = useStore()
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  const navigate = useNavigate()
  const goto = (e) => {
    let path = `/${e.key}`
    console.log(e)
    testStore.setBreadcrumb(e.keyPath)
    navigate(path)
  }
  return (

    <Sider
      width={200}
      style={{
        background: colorBgContainer,
      }}
    >
      <Menu
        mode="inline"
        defaultSelectedKeys={['1']}
        defaultOpenKeys={['sub1']}
        style={{
          height: '100%',
          borderRight: 0,
        }}
        items={menus}
        onClick={goto}
      />
    </Sider>
  )
}

export default MenuBox